<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">横向</label>
            <div class="layui-input-inline">
                <input type="text" name="xroot" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">纵向</label>
            <div class="layui-input-inline">
                <input type="text" name="yroot" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-inline">
                <input type="text" name="money" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                    lay-filter="data-btn">设置座位
            </button>
        </div>
    </div>
</form>
<style>
    #tableId {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div class="content">
    <!--    <table class="table">-->
    {volist name="seatDetail" id="vo"}
    <div class="con">
        {volist name="vo.x" id="v"}
        <div class="li tdi{$v.key}j{$vo.Y} {if condition='$v.dis == 1'} disabled_bg{/if}  ">
            <div class="text">{$vo['Y']}排{$v.key}座</div>
            <div class="input">
                <input type="number" placeholder="金额" name="money[' + j + 'money' + i + ']"
                       class="input{$v.key}i{$vo.Y}" value="{$v.money}"
                       onblur="inputBlur({$v.key},{$vo.Y},{$v.money})">
            </div>
            <div class="btn_li" id="{$v.key}jin{$vo.Y}" data-dis="{$v.dis}" data-yin="{$v.state}">
                <input type="hidden" id="{$v.key}yin{$vo.Y}" data-dis="{$v.dis}" data-yin="{$v.state}">
                {if condition="$v.dis == 1"}
                <div class="disable dis{$v.key}i{$vo.Y}" onclick="btn_click_remove({$v.key},{$vo.Y},{$v.money},{$v.dis},{$v.state})" >
                    启用
                </div>
                {else /}
                <div class="disable dis{$v.key}i{$vo.Y}" onclick="btn_disable({$v.key},{$vo.Y},{$v.money},{$v.dis},{$v.state})">
                    禁用
                </div>
                {/if}
                {if condition="$v.state == 0"}
                <div class="disable yin{$v.key}i{$vo.Y}" onclick="btn_click_remove_y({$v.key},{$vo.Y},{$v.money},{$v.dis},{$v.state})">
                    显示
                </div>
                {else /}
                <div class="disable yin{$v.key}i{$vo.Y}" onclick="btn_yincang({$v.key},{$vo.Y},{$v.money},{$v.dis},{$v.state})">
                    隐藏
                </div>
                {/if}
            </div>
        </div>
        {/volist}
    </div>

    {/volist}
    <!--    </table>-->

</div>
<button type="button" class="layui-btn" lay-filter="submitBtn" onclick="btn_submit()">保存</button>
<style>
    .content {
        width: 100%;
        overflow: auto;
        overflow-x: scroll;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    ::-webkit-scrollbar {
        display: block;
    }

    :horizontal {
        position: fixed;
        bottom: 0;
    }

    .con {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .btn_li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .con .li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 200px;
        padding: 0 10px;
        background: green;
        border: 1px solid #ccc;
    }

    .con .li .input input {
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: red;
    }

    .con .li .disable {
        background: #eee;
        padding: 2px 10px;
        border-radius: 20px;
        margin: 2px 0;
        cursor: pointer;
    }

    .con .li .text {
        color: #ccc;
        margin: 5px 0;
    }

    .disabled_bg {
        background: #e91e63 !important;
    }
</style>

<script type="text/javascript">
    let all_list = {$all | raw};
    layui.use(['form'], function () {
        let form = layui.form
            , $ = layui.$;

        form.on('submit(data-btn)', function (res) {
            let data = res.field;
            all_list = [];
            disable_list = [];
            console.log(data)
            let html = '';
            for (let i = 1; i <= data.yroot; i++) {
                html += '<div class="con">'
                for (let j = 1; j <= data.xroot; j++) {

                    html += '<div class="li tdi' + j + 'j' + i + ' ">';
                    html += '<div class="text">' + i + '排' + j + '座</div>';
                    html += '<div class="input" >';
                    html += '<input type="number" placeholder="金额" name="money[' + j + 'money' + i + ']" class="input' + j + 'i' + i + '" value="' + data.money + '" onblur="inputBlur(' + j + ',' + i + ',' + data.money + ')">';
                    html += '</div>';
                    html += '<div class="btn_li" id="'+j+'jin'+i+'" data-dis="0" data-yin="1">';
                    html += '<input type="hidden" id="'+j+'yin'+i+'" data-dis="0" data-yin="1">'
                    html += '<div class="disable dis' + j + 'i' + i + '" onclick="btn_disable(' + j + ',' + i + ',' + data.money + ',1,1)" >禁用</div>';
                    html += '<div class="disable yin' + j + 'i' + i + '" onclick="btn_yincang(' + j + ',' + i + ',' + data.money + ',1,0)" >隐藏</div>';
                    html += '</div>';
                    html += '</div>';
                    all_list.push([j, i, data.money, 0,1])
                }
                html += '</div>';
            }
            $(".content").html(html)
            return false;
        })

    })
    //禁用
    function btn_disable(i, j, money, disabled,yincang) {
        let data_dis = $("#"+i+"jin"+j+"").attr("data-dis");
        let data_yin = $("#"+i+"jin"+j+"").attr("data-yin");
        if(data_dis == 0){
            data_dis = 1;
        }else{
            data_dis = 0;
        }

        $(".tdi" + i + "j" + j + "").addClass("disabled_bg")
        $(".dis" + i + "i" + j + "").attr("onclick", "btn_click_remove(" + i + "," + j + "," + money + ",1,"+yincang+")");
        $(".dis" + i + "i" + j + "").html("启用")
        console.log(all_list)
        all_list.forEach(function (item, index) {
            if (JSON.stringify([item[0], item[1]]) == JSON.stringify([i, j])) {
                all_list[index] = [i, j, money, data_dis,data_yin];
            }
        })
        $("#"+i+"jin"+j+"").attr("data-dis",data_dis);
        console.log(all_list)
    }
    //显示
    function btn_click_remove(i, j, money, disabled,yincang) {
        let data_dis = $("#"+i+"jin"+j+"").attr("data-dis");
        let data_yin = $("#"+i+"jin"+j+"").attr("data-yin");
        if(data_dis == 0){
            data_dis = 1;
        }else{
            data_dis = 0;
        }
        $("#"+i+"jin"+j+"").attr("data-dis",data_dis);
        let arrays = [];
        // disable_list.forEach(function (item, index) {
        //     if (JSON.stringify(item) != JSON.stringify([i, j,money,disabled])) {
        //         console.log(item[0], item[1])
        //         arrays.push([item[0], item[1],money,disabled])
        //     }
        // })
        // disable_list = arrays;
        all_list.forEach(function (item, index) {
            if (JSON.stringify([item[0], item[1]]) == JSON.stringify([i, j])) {
                all_list[index] = [i, j, money, data_dis,data_yin];
            }
        })
        $(".tdi" + i + "j" + j + "").removeClass("disabled_bg")
        $(".dis" + i + "i" + j + "").attr("onclick", "btn_disable(" + i + "," + j + "," + money + ",0,"+yincang+")");
        $(".dis" + i + "i" + j + "").html("禁用")
    }
    //点击隐藏
    function btn_yincang(i, j, money, disabled,yincang) {
        let data_dis = $("#"+i+"jin"+j+"").attr("data-dis");
        let data_yin = $("#"+i+"jin"+j+"").attr("data-yin");
        if(data_yin == 0){
            data_yin = 1;
        }else{
            data_yin = 0;
        }
        $("#"+i+"jin"+j+"").attr("data-yin",data_yin);
        $(".yin" + i + "i" + j + "").attr("onclick", "btn_click_remove_y(" + i + "," + j + "," + money + ","+disabled+",0)");
        $(".yin" + i + "i" + j + "").html("显示")
        all_list.forEach(function (item, index) {
            if (JSON.stringify([item[0], item[1]]) == JSON.stringify([i, j])) {
                all_list[index] = [i, j, money, data_dis,data_yin];
            }
        })
        console.log(all_list)
    }
    //点击显示
    function btn_click_remove_y(i, j, money, disabled,yincang) {
        let data_dis = $("#"+i+"jin"+j+"").attr("data-dis");
        let data_yin = $("#"+i+"jin"+j+"").attr("data-yin");
        if(data_yin == 0){
            data_yin = 1;
        }else{
            data_yin = 0;
        }
        $("#"+i+"jin"+j+"").attr("data-yin",data_yin);
        let arrays = [];
        all_list.forEach(function (item, index) {
            if (JSON.stringify([item[0], item[1]]) == JSON.stringify([i, j])) {
                all_list[index] = [i, j, money, data_dis,data_yin];
            }
        })
        $(".yin" + i + "i" + j + "").attr("onclick", "btn_yincang(" + i + "," + j + "," + money + "," + disabled + ",1)");
        $(".yin" + i + "i" + j + "").html("隐藏")
    }




    function inputBlur(i, j) {
        console.log(i, j)
        let money = $(".input" + i + "i" + j + "").val();
        console.log(money)
        all_list.forEach(function (item, index) {
            if (JSON.stringify([item[0], item[1]]) == JSON.stringify([i, j])) {
                all_list[index] = [i, j, money, item[3]];
            }
        })
    }

    function btn_submit() {
        console.log(all_list)
        hadmin.http("{:url('submit')}", {
            all: all_list,
            seat_id: {$id}
        }).then(res => {
            if (res.code == 1) {
                layui.layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                    hadmin.father_reload();
                })
            }
        })
    }
</script>